// Create and style the input field
var input = document.createElement('input');
input.type = 'number';
input.placeholder = 'Enter rotation degree';
input.style.position = 'fixed';
input.style.bottom = '10px'; // Position at the bottom
input.style.left = '50%'; // Center horizontally
input.style.transform = 'translateX(-50%)'; // Adjust for centering
input.style.zIndex = '1000';
input.style.padding = '10px'; // Add padding for size
input.style.fontSize = '16px'; // Make the font larger
input.style.width = '200px'; // Increase width
input.style.borderRadius = '5px'; // Add rounded corners
input.style.border = '2px solid #ccc'; // Add border
input.setAttribute('tabindex', '0'); // Add tabindex to include in tab order

document.body.appendChild(input);


// Function to get the current rotation degree of the image
function getCurrentRotation() {
    var image = document.querySelector('#viewer2 img'); // Adjust the selector if necessary
    if (image) {
        var style = window.getComputedStyle(image, null);
        var transform = style.getPropertyValue('transform');
        if (transform !== 'none') {
            var values = transform.split('(')[1].split(')')[0].split(',');
            var a = values[0];
            var b = values[1];
            var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
            return angle;
        }
    }
    return 0; // Default rotation is 0 if no transformation is applied
}

// Add an event listener to update the rotation when Alt + Z is pressed
document.addEventListener('keydown', function(event) {
    if (event.altKey && event.key === 'z') {
        input.focus(); // Focus on the rotation degree input field
    }
});

document.addEventListener('keydown', function(event) {
    if (event.altKey && event.key === 'Z') {
        input.focus(); // Focus on the rotation degree input field
    }
});


// Add an event listener to listen for "Tab" key press
input.addEventListener('keydown', function(event) {
    if (event.key === 'Tab') {
        event.preventDefault(); // Prevent the default "Tab" behavior
        var nextField = document.querySelector('#cnsgee_nam'); // Get the next field
        if (nextField) {
            nextField.focus(); // Focus on the next field
        }
    }
});

// Add an event listener to update the rotation
input.addEventListener('change', function() {
    var degree = parseFloat(input.value);
    var image = document.querySelector('#viewer2 img'); // Adjust the selector if necessary
    if (image && !isNaN(degree)) {
        var currentDegree = getCurrentRotation();
        var newDegree = currentDegree + degree;
        image.style.transform = 'rotate(' + newDegree + 'deg)';
        input.value = ''; // Clear the input field after updating the rotation
    }
});
